<!--  -->
<template>
  <div class="app-container">
    <div class="formDiv">
      <el-form ref="form" :model="form" label-width="200px" :inline="true">
        <el-row>
          <el-col :span="8">
            <el-form-item label="优惠券名称">
              <el-input v-model="form.keyword" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上架状态">
              <el-select v-model="form.status" placeholder="请选择" clearable>
                <el-option
                  v-for="(item,index) in isOnStatus"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
            <el-button type="primary" @click="toRoutes('couponList')">新建优惠券</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-loading="tableLoading" class="listDiv">
      <el-table ref="tableData" :data="tableData" style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="编号"
          width="50"
          align="center"
          :index="table_index"
        />
        <el-table-column label="优惠券名称" prop="type_name" align="center" width="150px" />
        <el-table-column label="类型" prop="source_name" align="center" width="150px" />
        <el-table-column label="数量" prop="tiket_count" align="center" width="150px" />
        <el-table-column label="发放方式" prop="send_type_name" align="center" width="150px" />
        <el-table-column label="使用范围" prop="scope_name" align="center" width="150px" />
        <el-table-column label="关联项目" prop="project_num" align="center" width="150px">
          <template slot-scope="scope">
            <div
              style="color: #409eef; cursor:pointer"
              @click="getProjects(scope.row.project_id)"
            >{{ scope.row.project_num }}</div>
          </template>
        </el-table-column>
        <el-table-column label="领取数量" prop="user_count" align="center" width="150px">
          <template slot-scope="scope">
            <div
              style="color: #409eef; cursor:pointer"
              @click="getNum(scope.row.id)"
            >{{ scope.row.user_count }}</div>
          </template>
        </el-table-column>
        <el-table-column label="使用数量" prop="used_count" align="center" width="150px" />
        <el-table-column label="创建时间" prop="created_at" align="center" width="150px" />
        <el-table-column label="到期时间" prop="due_time" align="center" width="150px" />
        <el-table-column label="状态" fixed="right" align="center" prop="status">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2"
              @change="switchChange(scope.row.id,scope.row.status)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="toRoutes('couponList')">查看</el-button>
            <el-button size="small" type="text" @click="handleDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="form.page"
            :page-sizes="page_sizes"
            :page-size="form.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 领取数量弹窗 -->
    <el-dialog title="领取数量" :visible.sync="dialogNumVisible" width="80%" center>
      <div class="formDiv">
        <el-form ref="form1" :model="form1" label-width="200px" :inline="true">
          <el-row>
            <el-col :span="8">
              <el-form-item label="手机号">
                <el-input v-model="form1.keyword" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="使用状态">
                <el-select v-model="form1.is_use" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in isUseStatus"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" @click="handleSearch1">查询</el-button>
              <el-button type="primary" @click="handleReset1">重置</el-button>
            </el-col>
          </el-row>
          <div v-loading="tableLoading1" class="listDiv">
            <el-table ref="tableData1" :data="tableData1" height="400" style="width: 100%">
              <el-table-column label="用户ID" prop="user_id" align="center" />
              <el-table-column label="用户昵称" prop="nickname" align="center" />
              <el-table-column label="手机号" prop="username" align="center" />
              <el-table-column label="使用状态" prop="is_use_name" align="center" />
              <el-table-column label="领取时间" prop="get_time" align="center" />
              <el-table-column label="过期时间" prop="end_time" align="center" />
            </el-table>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <!-- 关联项目 -->
    <el-dialog title="关联项目" :visible.sync="dialogProjectVisible" height="450" width="80%" center>
      <div v-loading="tableLoading2" class="listDiv">
        <el-table ref="tableData2" :data="tableData2" style="width: 100%">
          <el-table-column label="项目ID" prop="id" align="center" />
          <el-table-column label="项目名称" prop="group_project_name" align="center" />
          <el-table-column label="省份" prop="province_name" align="center" />
          <el-table-column label="医院名称" prop="hospital_name" align="center" />
          <el-table-column label="项目分类" prop="category_name" align="center" />
          <el-table-column label="价格类型" prop="price_type_name" align="center" />
          <el-table-column label="价格" prop="price" align="center" />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, isOn, isDel, getNumList, getProject } from "@/api/couponList";
export default {
  name: "Coupon",

  components: {},
  data() {
    return {
      form: {
        keyword: "",
        status: "",
        page: 1,
        size: 10,
      },
      isOnStatus: [
        { name: "上架", value: 1 },
        { name: "下架", value: 2 },
      ], // 上架状态
      tableLoading: true,
      tableData: [],
      page_sizes: [10, 30, 50, 100],
      page_totals: 0,
      form1: {
        keyword: "",
        is_use: "",
        ticket_id: "",
        page: 1,
        size: 10,
      }, // 领取数量
      isUseStatus: [
        { name: "未使用", value: 2 },
        { name: "已使用", value: 1 },
      ],
      dialogNumVisible: false,
      tableLoading1: true,
      tableData1: [], // 领取数量
      dialogProjectVisible: false,
      tableLoading2: true,
      tableData2: [],
    };
  },

  mounted() {
    this.getList(this.form);
  },

  methods: {
    // 编号
    table_index(index) {
      return (this.form.page - 1) * this.form.size + index + 1;
    },
    // 跳转
    toRoutes(name) {
      this.$router.push(name);
    },
    // 获取列表
    getList(opt) {
      getList(opt).then((res) => {
        this.tableLoading = false;
        // console.log("res", res.data);
        if (res.data.code == 200) {
          this.tableData = res.data.data;
          this.page_totals = res.data.meta.total;
        } else {
          this.tableLoading = false;
          this.warnStatus(res.data.message, "warning");
        }
      });
    },
    // 列表状态
    switchChange(id, opt) {
      const data = { id, opt };
      isOn(data).then((res) => {
        if (res.data.code == 200) {
          this.warnStatus("修改成功", "success");
        } else {
          this.warnStatus(res.data.msg, "warning");
        }
      });
    },
    // 删除
    handleDel(id) {
      const data = { id };
      this.$confirm("此操作将会删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          isDel(data)
            .then((res) => {
              if (res.data.code == 200) {
                this.warnStatus("删除成功", "success");
                this.getList();
              } else {
                this.warnStatus(res.data.message, "warning");
              }
            })
            .catch((err) => {
              this.errorStatus(err.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 关联项目
    getProjects(id) {
      this.dialogProjectVisible = true;
      const data = {
        project_id: id,
      };
      getProject(data).then((res) => {
        this.tableLoading2 = false;
        console.log("res", res.data);
        if (res.data.code == 200) {
          this.tableData2 = res.data.data;
        }
      });
    },
    // 领取数量弹窗
    getNum(id) {
      this.form1.ticket_id = id;
      // let data = { ...this.form };
      this.dialogNumVisible = true;
      this.handleList(this.form1);
    },
    // 领取数量
    handleList(opt) {
      // console.log("opt", opt);
      getNumList(opt).then((res) => {
        // console.log("res", res.data);
        this.tableLoading1 = false;
        if (res.data.code == 200) {
          this.tableData1 = res.data.data;
        } else {
          this.warnStatus(res.data.msg, "warning");
        }
      });
    },
    // 查询
    handleSearch() {
      this.form.page = 1;
      this.getList(this.form);
    },
    // 重置
    handleReset() {
      this.form.keyword = "";
      this.form.status = "";
      this.getList(this.form);
    },
    // 当前数
    handleSizeChange(val) {
      this.form.size = val;
      this.getList(this.form);
    },
    // 当前页
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList(this.form);
    },
    // 领取数量查询
    handleSearch1() {
      this.handleList(this.form1);
    },
    // 领取数量重置
    handleReset1() {
      this.form1.keyword = "";
      this.form1.is_use = "";
      this.handleList(this.form1);
    },
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status,
      });
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
    // 成功状态弹窗
    warnStatus(txt, status) {
      this.eleMsg(txt, status);
      // this.eleMsg(txt, "warning");
    },
  },
};
</script>
<style  scoped>
.pagesCon {
  text-align: right;
  margin-top: 20px;
}
</style>
